<!--
 * @title:树形级联组件
 * @params1: 参数1
 * @params2: 参数2
 * @params3: 参数3
 * @params4: 参数4
 * @method1: 参数1
 * @method1: 参数2
 * @method1: 参数3
 * @method1: 参数4
 * @description:树形级联组件
 * @fileName: calcader.vue
 * @author: 董航
 * @date: 2020-10-28 15:04:41
!-->
<template>
<div style="display: inline-block">
  <el-cascader v-model="initDisplayData" :options="dataList" :placement="placement" style="display: inline-block" filterable @change="handleChange" clearable></el-cascader>
</div>
</template>

<script>
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
export default {
  name: 'TlCascader',
  data() {
    return {
      dataList: []
    }
  },
  props: {
    width: {
      default: 250,
      type: Number,
      String
    },
    placement: {
      default: 'placement',
      type: String
    },
    queryTreeUrl: {
      default: '',
      type: String,
      required: true
    },
    value: {
      default: '',
      type: [String, Number]
    },
    initDisplayData: {
      default: '',
      type: String
    },
    queryDataParam: {
      default: function() {
        return {}
      },
      type: Object
    },
    keyIndex: {
      default: 'id',
      type: String
    }
  },
  methods: {
    handleChange(values) {
      if (values.length > 0) {
        this.value = values[values.length - 1]
      }
    }
  },
  created() {
    /** 查询树 */
    getAction(this.queryTreeUrl, this.queryDataParam).then(res => {
      if (res.success) {
        if (this.keyIndex.length > 0) {
          let reg = new RegExp(this.keyIndex, 'g') // g代表全部
          this.dataList = JSON.parse(JSON.stringify(res.result.dataList).replace(reg, 'value'))
        } else {
          this.dataList = res.result.dataList
        }
      }
    })
  }
}
</script>

<style></style>
